<template>
  <div style="margin: 10px;">
    <van-button type="primary" @click="addTeam" style="width: 100%;">新建队伍</van-button>
  </div>
  <van-tabs v-model:active="active" @change="onTabChange">
    <van-tab title="公开" name="public"></van-tab>
    <van-tab title="加密" name="secret"></van-tab>
  </van-tabs>
<van-card v-for="team in teamList"
  :desc=team.description
  :title=team.teamName
>
  <template #tags>
    <van-tag plain type="primary" style="margin-right: 8px;margin-top: 8px;">
      {{getStatus(team.teamStatus)}}
    </van-tag>
  </template>
  <template #footer>
    <van-button v-if="currentUser.id===team.creatUser.id" size="mini" @click="editTeam(team.id)">修改</van-button>
    <van-button size="mini" @click="quitTeam(team.id)">退出</van-button>
    <van-button v-if="currentUser.id===team.creatUser.id" size="mini" type="danger" @click="deleteTeam(team.id)">解散</van-button>
  </template>
  <template #bottom>
    <div>
      {{ '最大人数' + team.maxNum }}
    </div>
    <div>
      {{ '过期时间' + team.expireTime }}
    </div>
  </template>
</van-card>
</template>





<script setup lang="ts">
import { useRouter } from 'vue-router';
import {ref,onMounted} from 'vue'
import myAxios from '../../plugins/myAxios';
import { showFailToast, showSuccessToast } from 'vant';

const router = useRouter()

const teamList = ref()
const currentUser = ref()
const active = ref('public')

onMounted(()=>{
  getTeam()
  getUser()
})
  


const addTeam = ()=>{
  router.push({
    path:"/team/add",
  })
}

const onTabChange = (name:string)=>{
  if(name == 'public'){
    getTeam(0)
  }else{
    getTeam(2)
  }
}


const editTeam = (id:number)=>{
  router.push({
    path:'/team/update',
    query:{
      id
    }
  })
}

const getTeam = async(status?:number)=>{
  await myAxios.get('/team/all/my/create',{
    params:{
      teamStatus:status,
    }
  }).then((res)=>{    
    teamList.value = res.data.data
  })
}
 
const getStatus = (status:string)=>{
  if(Number(status) == 0) return '公开'
  else if(Number(status) == 1) return '私密'
  else return '加密'
}

const getUser = async()=>{
  const res = await myAxios.get('/user/current')
  currentUser.value = res.data.data
}

const quitTeam = async(teamId:number)=>{
  const res = await myAxios.post('/team/quit',{
    params:{
      teamId:teamId
    }
  })
  console.log(res);
  if(res.data.code == 0){
    showSuccessToast("退出成功")
    window.location.reload()
  }else{
    showFailToast("退出失败")
  }
}
const deleteTeam = async(teamId:number)=>{
  const res =await myAxios.post('/team/delete',{
    id:teamId
  })
  console.log(res);
  if(res.data.code == 0){
    showSuccessToast("删除成功")
    window.location.reload()
  }else{
    showFailToast("删除失败")
  }
}


</script>



<style scoped>

</style>